.cycle-page {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  display: flex;
  .cycle-chart {
    width: 400px;
    height: 200px;
  }
  .cycle-app {
    padding: 20px;
    table,td {
      border: 1.5px solid #5e6a96;
    }
    .cycle-table {
      width: 400px;
      height: 150px;
      border-collapse: collapse;
      .cycle-tr {
        width: 100%;
        height: 25%;
        display: flex;
        text-align: center;
        .cycle-td-label {
          display: inline-block;
          flex: 1;
          width: 20%;
          font-weight: 600;
        }
        .cycle-td-value {
          display: inline-block;
          flex: none;
          width: 80%;
          .cycle-td-progress {
            width: 100%;
            max-height: 40px;
            border: 1px solid gray;
            border-radius: 5px;
            transition: width 0.5s;
            background: linear-gradient(to right, #75a1ff, #e5eeff);
            &:hover {
              border: 1px solid black;
              background: linear-gradient(to right, #4983ff, #c3d8ff); 
            }
          }
        }
      }
    }
  }
}